<template>
  <div class="sideBar">
    <div class="top">
      <div class="logo">
        <router-link :to="'/'">
          <p style="color: white; font-size: 20px">
            病人关爱中心
            <!-- <siteLogo class="img" mainColor="var(--bs-dark-color)" themeColor="var(--bs-theme-color)" :size="42" /> -->
          </p>
        </router-link>
      </div>
      <div class="navList">
        <router-link
          :to="item.url"
          class="item"
          v-for="(item, index) in navList"
          :key="index"
        >
          <dl>
            <dt>
              <i class="iconfont" :class="item.icon"></i>
            </dt>
            <dd>{{ item.name }}</dd>
          </dl>
        </router-link>
        <a>
          <dl @click="handlelogOut">
            <dt><i class="iconfont icon-logout"></i></dt>
            <dd>登出</dd>
          </dl>
        </a>
      </div>
    </div>

    <div class="themes">
      <div class="toggle">
        <ul>
          <li @click="toggleTheme">
            <Transition name="slide-up" mode="out-in">
              <i class="iconfont icon-sun" v-if="data.theme == 'dark'"></i>
              <i class="iconfont icon-moon" v-else></i>
            </Transition>
          </li>
          <li @click="toggleThemePanel">
            <i class="iconfont icon-themes"></i>
          </li>
          <div class="themeList" :class="{ active: data.activeThemePanel }">
            <ul>
              <li v-for="item in indexStore.themeColors">
                <span
                  :style="{ background: item }"
                  @click="setThemeColor(item)"
                ></span>
              </li>
              <li @click="toggleMoreColor" class="morecolorBtn">
                <span>More Color</span>
              </li>
            </ul>
            <div class="moreColor" :class="{ show: data.moreColorVisiable }">
              <ColorPicker
                :theme="data.theme"
                :color="data.themeColor"
                :colors-default="[]"
                @changeColor="changeColor"
                v-if="data.moreColorVisiable"
              />
              <div class="button">
                <button
                  @click="setThemeColor(data.pickerColor)"
                  v-if="data.moreColorVisiable"
                >
                  CONFIRM
                </button>
              </div>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch } from "vue";
import { useRouterStore, useIndexStore } from "@/store/path";
import { themeLight, themeDark } from "@/api/theme";
import { ColorPicker } from "vue-color-kit";
import "vue-color-kit/dist/vue-color-kit.css";
import { useRoute } from "vue-router";
import { userInfo } from "@/api";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
import router from "@/route/index";
const route = useRoute();
const data = reactive({});
const navList = reactive([
  { name: "病人列表", icon: "icon-hospital", url: "/home" },
  { name: "添加病人", icon: "icon-patient", url: "/addPatient" },
  { name: "查看病人", icon: "icon-patient", url: "/viewProfile" },
  { name: "血压管理", icon: "icon-bloodPreasure", url: "/bloodPreasure" },
  // { name: "设置", icon: "icon-setting", url: "/setting" },
]);
const routerStore = useRouterStore();
const indexStore = useIndexStore();
const props = defineProps({
  showActive: {
    type: Boolean,
    default() {
      return false;
    },
  },
});
data.currentIndex = 0;
data.theme = "light";
data.themeColor = "#1A83A6";
data.activeThemePanel = false;
const toggleTheme = () => {
  let theme = data.theme == "light" ? "dark" : "light";
  setTheme(theme);
};
const setTheme = (theme) => {
  data.theme = theme;
  localStorage.setItem("themeType", theme);
  let themeSource = theme == "light" ? themeLight : themeDark;
  let root = document.querySelector(":root");
  for (let i in themeSource) {
    root.style.setProperty(i, themeSource[i]);
  }
};

const toggleThemePanel = () => {
  data.activeThemePanel = data.activeThemePanel ? false : true;
};
const hideThemePanel = () => {
  data.moreColorVisiable = false;
  data.activeThemePanel = false;
};

const setThemeColor = (theme) => {
  data.themeColor = theme;
  indexStore.$patch({
    themeColor: theme,
  });
  hideThemePanel();
  let root = document.querySelector(":root");
  root.style.setProperty("--bs-theme-color", theme);
  localStorage.setItem("themeColor", theme);
};

const toggleMoreColor = () => {
  data.moreColorVisiable = data.moreColorVisiable ? false : true;
};
const changeColor = (color) => {
  data.pickerColor = color.hex;
  // setThemeColor(color.hex)
};
const toLoginPage = () => {
  vToast({
    message: "对不起您无权限查看此页",
  }).then((res) => {
    indexStore.$patch({ token: null });
    sessionStorage.removeItem("token");
    router
      .push({ name: "login" })
      .catch((err) => console.log("路由跳转失败:", err));
  });
};
const handlelogOut = () => {
  vConfirm({
    message: "确定退出吗?",
  })
    .then(() => {
      logout().then((res) => {
        if (res.code == 200) {
          vToast({
            message: "退出成功！",
          });
        } else {
          vToast({
            message: "退出失败" + res.msg,
          });
        }

        setTimeout(() => {
          window.location.href = "/user/login";
        }, 500);
      });
    })
    .catch(() => {});
};
let userInfoLoaded = false;
onMounted(() => {
  // let themeType = localStorage.getItem("themeType");
  // let themeColor = localStorage.getItem("themeColor");
  // let themeSource = indexStore.themeColors;
  // if (themeType) {
  //   setTheme(themeType);
  // }
  // if (!themeColor) {
  //   themeColor = themeSource[Math.floor(Math.random() * themeSource.length)];
  // }
  // setThemeColor(themeColor);
  if (userInfoLoaded) return;
  userInfo().then((res) => {
    if (res.code == 200) {
      if (res.data.isadmin != 1) {
        toLoginPage();
      }
    } else {
      toLoginPage();
    }
  });
});
</script>
<style lang="less" scoped>
@import url("@/assets/css/variables.less");

.sideBar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;

  .top {
    .logo {
      height: 74px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      a {
        display: flex;
        font-weight: bold;
        justify-content: center;
        color: var(--bs-dark-color);

        p {
          & > i {
            font-size: 28px;
            padding-right: 6px;
          }

          span {
            i {
              font-style: normal;
              color: var(--bs-theme-color);
            }
          }

          .img {
            width: 48px;
            height: 48px;
          }
        }

        &:hover {
          color: var(--bs-theme-color);
        }
      }
    }
  }

  .toggle {
    transition: border-color 0.6s;
    cursor: pointer;
    position: relative;
    display: none;

    & > ul {
      display: flex;
      justify-content: space-between;
      border-top: var(--bs-light-color) 1px solid;

      & > li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 36px;
        height: 36px;
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        padding: 10px 0;
        position: relative;
        border-left: var(--bs-light-color) 1px solid;

        .iconfont {
          font-size: 22px;
          position: absolute;
          left: 50%;
          margin-left: -11px;
          color: var(--bs-dark-color);

          &.icon-palette-line {
            color: var(--bs-theme-color);
          }
        }

        &:first-child {
          border-left: none;
        }
      }

      .themeList {
        position: absolute;
        background: var(--bs-light-color);
        left: 78px;
        bottom: 0px;
        border: var(--bs-border-color) 1px solid;
        padding: 14px;
        transform: translateY(-30px);
        visibility: hidden;
        opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 0.6s;

        &.active {
          transform: none;
          visibility: visible;
          opacity: 1;
        }

        ul {
          display: flex;
          width: 160px;
          flex-wrap: wrap;
          gap: 12px;

          li {
            flex-grow: 1;
            display: flex;
            justify-content: center;

            &.morecolorBtn {
              width: 100%;
              display: flex;

              span {
                font-size: 10px;
                text-align: center;
                border: var(--bs-border-color) 1px solid;
                padding: 0;
                flex-grow: 1;
                line-height: 32px;
                height: 32px;
              }
            }

            span {
              width: 24px;
              height: 24px;
              cursor: pointer;
              border-radius: 3px;
            }
          }
        }

        .moreColor {
          position: absolute;
          bottom: 0;
          left: calc(100% + 6px);
          transform: translateX(20px);
          opacity: 0;
          visibility: hidden;
          transition: all 0.6s;

          &.show {
            transform: none;
            opacity: 1;
            visibility: visible;
          }

          .button {
            position: absolute;
            right: 10px;
            bottom: 86px;

            button {
              height: 30px;
              line-height: 30px;
              background: transparent;
              color: var(--bs-dark-color);
              transition: none;
              width: 198px;
              text-shadow: 1px 0 0 var(--bs-bg-color),
                -1px 0 0 var(--bs-bg-color), 0 1px 0 var(--bs-bg-color),
                0 -1px 0 var(--bs-bg-color), 1px 1px var(--bs-bg-color),
                -1px -1px 0 var(--bs-bg-color), 1px -1px 0 var(--bs-bg-color),
                -1px 1px 0 var(--bs-bg-color);
            }
          }
        }
      }
    }
  }
}

.hu-color-picker {
  box-sizing: content-box;
  box-shadow: none;
  border: var(--bs-border-color) 1px solid;

  &.light,
  &.dark {
    background: var(--bs-bg-color);
  }
}

.navList {
  display: flex;
  text-align: center;
  flex-direction: column;

  a {
    cursor: pointer;
    transition: all 0.3s;
    color: var(--bs-border-color);

    &:hover {
      color: var(--bs-bg-color);
    }

    dl {
      width: 100%;
      height: 54px;
      font-size: 14px;
      font-weight: bold;
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 0 14px;
      border-top: transparent 1px solid;
      border-bottom: transparent 1px solid;

      .iconfont {
        font-size: 22px;
      }
    }

    &.active {
      dl {
        background: var(--bs-light-color);
        border-color: var(--bs-border-color);
        color: var(--bs-theme-color);
      }
    }
  }
}
</style>
  